<template>
	<view v-if="pageData && pageData[0]" :class="['video_box', pageData[0].playType == 1 ? '' : 'video_advertise']"
	 :style="{ 'padding-bottom': height > 0 ? height + '%' : '0' }">
		<view
			v-if="pageData[0].playType == 1"
			:style="{
				height: pageData[0].height * 2 + 'rpx'
			}"
			@click="goSee"
		>
			<image mode="aspectFill" :src="pageData[0].poster"></image>
		</view>
		<template v-else>
			<!-- #ifdef MP-WEIXIN || H5 -->
			<video
				:style="{
					'border-radius':
						(parameter.radiusTop || 0) * 2 +
						'rpx ' +
						(parameter.radiusTop || 0) * 2 +
						'rpx ' +
						(parameter.radiusBot || 0) * 2 +
						'rpx ' +
						(parameter.radiusBot || 0) * 2 +
						'rpx'
				}"
				object-fit="fill"
				:poster="pageData[0].poster"
				@loadedmetadata="loadedmetadata"
				class="video_view"
				:src="pageData[0].src"
			></video>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN || H5  -->
			<video
				:style="{
					'border-radius':
						(parameter.radiusTop || 0) * 2 +
						'rpx ' +
						(parameter.radiusTop || 0) * 2 +
						'rpx ' +
						(parameter.radiusBot || 0) * 2 +
						'rpx ' +
						(parameter.radiusBot || 0) * 2 +
						'rpx',
					height: pageData[0].height * 2 + 'rpx'
				}"
				:poster="pageData[0].poster"
				object-fit="fill"
				class="video_view"
				:src="pageData[0].src"
			></video>
			<!-- #endif -->
		</template>
	</view>
</template>

<script>
export default {
	props: ['templateItem'],
	data() {
		return {
			height: 0,// 自动获取的视频高度
		};
	},
	computed: {
		pageData() {
			return this.templateItem.pageData;
		},
		parameter() {
			return this.templateItem.parameter;
		}
	},
	methods: {
		loadedmetadata(e) {
			let ratio = (e.detail.height / e.detail.width) * 100;
			this.height = ratio.toFixed(2);
		},
		goSee () {
			if(this.pageData[0].src){
				this.$linkTo(`/package/video/video-play/index?url=${this.pageData[0].src}`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.video_box {
	overflow: hidden;
	.video_view {
		width: 100%;
		vertical-align: bottom;
		background-color: #000;
		overflow: hidden;
	}
}
/* #ifdef MP-WEIXIN || H5 */
.video_advertise {
	height: 0;
	position: relative;
	.video_view {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
}
/* #endif */
</style>
